<!DOCTYPE html>
<html>

<head>
    <!-- 有一个父div，宽度是100%，父div下面有3个子div，等宽，平分父div宽度 -->
    <meta charset="utf-8">
    <title>纯CSS实现Tooltip</title>


    <style>
        /* Tooltip 容器 */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* 悬停元素上显示点线 */
        }

        /* Tooltip 文本 */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 300px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;

            /* 定位 */
            position: absolute;
            z-index: 1;

            top: -5px;
            left: 105%;

            opacity: 0;
            transition: all 0.2s;
        }

        /* 鼠标移动上去后显示提示框 */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .tooltip .tooltiptext1::after {
            content: " ";
            position: absolute;
            top: 50%;
            right: 100%;
            /* 提示工具左侧 */
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }
    </style>

</head>

<body>
    <div class="tooltip">鼠标移动到这
        <div class="tooltiptext">提示文本成都洒水车市场上出售的的菜市场的深层次</div>
    </div>
    <div>
        第二行文字
    </div>

</body>

</html>